import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Welcome",
    component: () => import("@/views/Welcome.vue"),
  },
  {
    path: "/demoThree",
    name: "DemoThree",
    component: () => import("@/views/DemoThree.vue"),
    children: [
      {
        path: "/periodictable",
        name: "Periodictable",
        component: () => import("@/views/samplesThree/Periodictable.vue"),
      },
      {
        path: "/birds",
        name: "Birds",
        component: () => import("@/views/samplesThree/Birds.vue"),
      },
      {
        path: "/ocean",
        name: "Ocean",
        component: () => import("@/views/samplesThree/Ocean.vue"),
      },
      {
        path: "/crossfade",
        name: "Crossfade",
        component: () => import("@/views/samplesThree/Crossfade.vue"),
      },
      {
        path: "/leaflet3D",
        name: "Leaflet3D",
        component: () => import("@/views/samplesThree/Leaflet3D.vue"),
      },
      {
        path: "/particleConversion",
        name: "ParticleConversion",
        component: () => import("@/views/samplesThree/ParticleConversion.vue"),
      },
      {
        path: "/particleConversionFinished",
        name: "ParticleConversionFinished",
        component: () =>
          import("@/views/samplesThree/ParticleConversionFinished.vue"),
      },
      {
        path: "/fbxScarf",
        name: "FbxScarf",
        component: () => import("@/views/samplesThree/FbxScarf.vue"),
      },
    ],
    redirect: "/periodictable",
  },
  {
    path: "/demoCesium",
    name: "DemoCesium",
    component: () => import("@/views/DemoCesium.vue"),
    children: [
      {
        path: "/blackAndWhite",
        name: "BlackAndWhite",
        component: () => import("@/views/samplesCesium/BlackAndWhite.vue"),
      },
      {
        path: "/shadeChange",
        name: "ShadeChange",
        component: () => import("@/views/samplesCesium/ShadeChange.vue"),
      },
      {
        path: "/customCube",
        name: "CustomCube",
        component: () => import("@/views/samplesCesium/CustomCube.vue"),
      },
      {
        path: "/flyLine",
        name: "FlyLine",
        component: () => import("@/views/samplesCesium/FlyLine.vue"),
      },
      {
        path: "/scanlineCircle",
        name: "ScanlineCircle",
        component: () => import("@/views/samplesCesium/ScanlineCircle.vue"),
      },
      {
        path: "/customShader",
        name: "CustomShader",
        component: () => import("@/views/samplesCesium/CustomShader.vue"),
      },
    ],
    redirect: "/blackAndWhite",
  },
  {
    path: "/makeapie",
    name: "Makeapie",
    component: () => import("@/views/Makeapie.vue"),
  },
  {
    path: "/contact",
    name: "Contact",
    component: () => import("@/views/Contact.vue"),
  },
  {
    path: "/friend",
    name: "Friend",
    component: () => import("@/views/Friend.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;
